<template>
  <el-row :gutter="30">
    <el-col v-loading="roleLoading" :span="4">
      <!--<el-button class="gradientVertical" size="large" type="primary" round @click="addRole()">添加角色</el-button>-->
      <div class="roleBox">
        <p v-for="role in roles" :key="role.roleId" :class="{active: role.roleId === chosedRoleId}" @click="chosedRoleId = role.roleId">
          {{ role.roleName }}
        </p>
        <empty v-if="roles.length === 0" />
      </div>
    </el-col>
    <el-col :span="20">
      <div class="action">
        <el-button class="gradientVertical" size="large" type="primary" round @click="authorityHandle()">保存</el-button>
      </div>
      <div class="tree">
        <el-tree
          ref="tree"
          v-loading="menuLoading"
          :data="allMenus"
          :props="defaultProps"
          :check-strictly="checkStrictly"
          show-checkbox
          default-expand-all
          :expand-on-click-node="false"
          node-key="menuId"
        />
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { menusByRole, getRoles, menuList } from './api'
import { getRoleTypes } from '@/api/common'

export default {
  data () {
    return {
      roleLoading: false,
      menuLoading: false,

      roles: [],
      chosedRoleId: '',

      allMenus: [],
      checkStrictly: false,
      defaultProps: {
        children: 'nodes',
        label: 'menuName'
      }
    }
  },
  watch: {
    chosedRoleId (val) {
      if (val) {
        this.getMenusByRole(val)
      }
    }
  },
  created () {
    this.getRoles()
    this.getMenus()
  },
  methods: {
    refreshTable () {
      this.getRoles()
    },
    getMenus (val) {
      this.menuLoading = true
      menuList({ term: 0, ...val }).then(res => {
        console.log(res)
        this.allMenus = res
      }).finally(() => {
        this.menuLoading = false
      })
    },
    // 获取角色列表
    getRoles () {
      this.roleLoading = true
      getRoles().then(res => {
        this.roles = res || []
        this.chosedRoleId = this.roles[0] ? this.roles[0].roleId : ''
      }).finally(() => {
        this.roleLoading = false
      })
    },
    // 获取角色下面的菜单
    getMenusByRole (roleId) {
      this.menuLoading = true
      this.checkStrictly = true
      menusByRole({ roleId, term: 0 }).then(res => {
        const authedMenuIds = res.map(x => x.menuId)
        this.$refs.tree.setCheckedKeys(authedMenuIds)
      }).finally(() => {
        this.menuLoading = false
        this.checkStrictly = false
      })
    },
    // 授权
    authorityHandle () {
      const checkList = this.$refs.tree.getCheckedNodes()
      console.log(checkList)
      const halfCheckeList = this.$refs.tree.getHalfCheckedNodes()
      console.log(halfCheckeList)
      const menuList = [...checkList, ...halfCheckeList]
      const menuIds = menuList.map(x => x.menuId)
      console.log(menuIds)

      const { chosedRoleId } = this
      menusByRole({}, { roleId: chosedRoleId, term: 0, menuIds: menuIds.join() }, 'post').then(() => {
        this.$message.success('设置成功')
        this.getMenusByRole(chosedRoleId)
      })
    },

    // 添加角色
    addRole () {
      const that = this
      const { $message } = this
      this.$prompt('请输入角色名称', '添加角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (value) {
          getRoleTypes({ roleName: value }, 'post').then(() => {
            $message('提交成功')
            that.refreshTable()
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.roleBox{
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 60px;

  p {
    padding: 16px 20px;
    font-size: 15px;
    color: #333;
    position: relative;
    cursor: pointer;
    text-align: center;

    &.active{
      color: #fff;
      background: linear-gradient( 90deg, #FF8B00 0%, #FFAB00 100%);
    }

    + p{
      border-top: 1px solid #E8E8E8
    }
  }
}

  .action{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .tree{
    margin-top: 20px;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
  }

</style>
